<template>
  <div class="wrapper">
    <comp-pagetitle>金融计算器</comp-pagetitle>
    <div class="content-box">
      <div class="left">
        <div>
          <select @click="carclick($event)">
            <option :value="item.id" v-for="item in carlist" :key="item.id">{{item.title}}</option>
          </select>
        </div>
        <div>
          <select @click="typeclick($event)">
            <option v-for="item,index in carlist[carindex].children" :value="index" :key="item.price">{{item.banben}}</option>
          </select>
        </div>
        <div><img :src="carlist[carindex].picUrl" alt="" /></div>
        <div class="price">
          <span>预计车辆总价：</span><span>{{carlist[carindex].children[priceindex].price}}</span>
        </div>
      </div>
      <div class="right">
        <div class="first">
            <span>贷款产品/融资租赁产品</span>
          <select class="longselect" @click="fenqiclick($event)">
            <option value="0">0首付起无尾款</option>
            <option value="0.2">轻松融资28</option>
            <option value="0.3">轻松融资37</option>
            <option value="0.4">轻松融资46</option>
            <option value="0.5">50%首付0利率</option>
          </select>
        </div>
        <div class="second">
          <div class="sleft">
            <span>首付比例</span>
            <select class="duanselect" disabled><option value="1">{{fenqi*100}}.00%</option></select>
          </div>
          <div class="sright">
            <span class="rcontent">首付金额</span><span>{{Math.floor(carlist[carindex].children[priceindex].price.replace(/[^0-9]/ig,"")*fenqi)}}元</span>
          </div>
        </div>
        <div class="third">
          <div class="sleft">
              <span>尾款比例/留购比例</span>
            <select class="duanselect" disabled>
              <option value="1">{{(1-fenqi)*100}}.00%</option>
            </select>
          </div>
          <div class="sright">
            <span>尾款金额/留购价</span><span>{{Math.floor(carlist[carindex].children[priceindex].price.replace(/[^0-9]/ig,"")*(1-fenqi))}}元</span>
          </div>
        </div>
        <div class="fourth">
          <span>还款/月租数</span
          ><select class="zhongselect" @click="mouthlick($event)">
            <option value="24">24个月</option>
            <option value="36">36个月</option>
            <option value="48">48个月</option>
            <option value="60">60个月</option>
          </select>
        </div>
        <div class="fifth"><span>月供/月租金</span><span>{{Math.floor(carlist[carindex].children[priceindex].price.replace(/[^0-9]/ig,"")*(1-fenqi)/mouth)}}元</span></div>
      </div>
    </div>
    <comp-footer></comp-footer>
  </div>
</template>

<script>
import { mapState } from "vuex";
import CompPagetitle from "@/components/comp-pagetitle.vue";
import CompFooter from "@/components/comp-footer.vue";
export default {
  name: "JiSuanQi",
  data(){
      return{
          carindex:0,
          priceindex:0,
          fenqi:0,
          mouth:24,
          allprice:362000
      }
  },
  components: {
    CompPagetitle,
    CompFooter,
  },
  computed: {
    ...mapState(["carlist"]),
  },
  methods:{
      carclick(event){
      if(event.target.value<9000010){
        this.carindex = event.target.value.slice(-1)-1
      }else{
        this.carindex = event.target.value.slice(-2)-1
      }
      this.priceindex = 0
        this.allprice = this.carlist[this.carindex].children[this.priceindex].price.replace(/[^0-9]/ig,"")
    },
      mouthlick(event){
          this.mouth = event.target.value
    },
      fenqiclick(event){
          this.fenqi = event.target.value
    },
      typeclick(event){
        this.priceindex = event.target.value
        this.allprice = this.carlist[this.carindex].children[this.priceindex].price.replace(/[^0-9]/ig,"")
    },
  }
};
</script>

<style lang="scss" scoped>
.content-box {
  width: 1140px;
  margin: 60px auto;
  display: flex;
  font-size: 16px;
  .left {
    width: 380px;
    height: 408px;
    padding-top: 30px;
    box-sizing: border-box;
    text-align: center;
    border-right: 3px solid #4a5568;
    position: relative;
    select {
      margin-bottom: 30px;
      width: 300px;
      height: 40px;
      outline: none;
      border: none;
      border-bottom: 1px solid #ccc;
    }
    img {
      height: 120px;
    }
    .price {
      padding: 0 40px;
      margin-top: 40px;
      display: flex;
      justify-content: space-between;
    }
  }
  .left::after {
    content: "";
    display: block;
    width: 0;
    height: 0;
    border: 10px solid transparent;
    border-left-color: #4a5568;
    position: absolute;
    right: -20px;
    top: 180px;
  }
  .right {
    width: 760px;
    height: 408px;
    padding: 30px 30px;
    box-sizing: border-box;
    background-color: #f9f9f9;
    .first,
    .second,
    .third,
    .fourth,
    .fifth {
      margin-bottom: 25px;
      width: 100%;
      height: 40px;
      line-height: 40px;
      border-bottom: 1px solid #ccc;
      select {
          padding-left: 30px;
        border: none;
        outline: none;
        font-size: 16px;
        background-color: transparent;
      }
    }
    .first {
      select {
        width: 75%;
      }
    }
    .second,
    .third {
      display: flex;
      justify-content: space-between;
      .sright {
        width: 50%;
        span:last-child {
          margin-left: 195px;
        }
      }
      .sleft {
        width: 50%;
        select {
          width: 75%;
        }
      }
    }
    .third {
      .sright {
        span:last-child {
          margin-left: 140px;
        }
      }
      .sleft{
          select{
              width: 54%;
          }
      }
    }
    .fourth{
        select{
            width: 87%;
        }
    }
    .fifth{
        display: flex;
        justify-content: space-between;
    }
  }
}
</style>